<html>
<head>
	<title>Wave</title>
	<script src="utils.js" type="text/javascript"></script>
	<script src="rpc.js" type="text/javascript"></script>
	<script src="common.pbjson.js" type="text/javascript"></script>
	<script src="waveclient-rpc.pbjson.js" type="text/javascript"></script>
	<script src="webclient.pbjson.js" type="text/javascript"></script>
	<script src="jsot.js" type="text/javascript"></script>
	<script src="path.js" type="text/javascript"></script>
	<script src="editor.js" type="text/javascript"></script>
	<script src="domiterator.js" type="text/javascript"></script>
	<style type="text/css">
body { font-family:aria,sans-serif; }
.jsot_caret { background-color:red; color:white; display:inline; font-size:9pt; position:relative; top:-2px }
.thread { border: 1px solid green; margin: 2px }
.blip { border: 1px solid red; margin: 2px }
	</style>	
	
</head>
<body>
	<div id="login">
		<form>
			<p>User JID: <input type="text" id="jid" value="tux" />@wave1.vs.uni-due.de</p>
			<p><input type="button" value="Login" onclick="login()" /></p>
			<p id="logintext"></p>
		</form>
	</div>

  <h1>Create a wave</h1>
  <input type="text" value="" id="waveurl" />
  <input type="submit" value="Open Wave" onclick="var w = document.getElementById('waveurl').value; JSOT.Rpc.openWavelet( w ); JSOT.Path.LocalState.setValue( 'waveurl', w )" />
  <input type="submit" value="New Wave" onclick="createWave()" />
  <input type="submit" value="Dump" onclick="dump()" />
  
  <div id="wavecontent"></div>
  
  <script type="text/javascript">

/**
 * Called when clicking on login
 */
function login()
{
	document.getElementById('logintext').innerHTML = "Logging in ... please wait";
	// Login at the wave server
	JSOT.Rpc.login( document.getElementById('jid').value + "@wave1.vs.uni-due.de", onLogin );
}

/**
 * Called when the server has logged us in
 */
function onLogin()
{
  document.getElementById('logintext').innerHTML = "Login successful";
	
  /*
	// Initialize the wave
	var wave = JSOT.Wave.getWave( "w+path", "wave1.vs.uni-due.de" );
	var wavelet = wave.getWavelet( "conv+root", "wave1.vs.uni-due.de" );
	// Register event handlers to become notified when something changes
	mainDoc = wavelet.getDoc("conversation");
	mainDoc.has_gui = true;
  */
  
  buildGUI();
	
  /*
	// Open the wave
	JSOT.Rpc.openWavelet( "wave://wave1.vs.uni-due.de/w+path/conv+root" );
	*/
}

function createWave()
{
  // Create the wave
  var wave = JSOT.Wave.getWave( "w+" + Math.random().toString(), JSOT.Rpc.waveDomain );
  var wavelet = wave.getWavelet( "conv+root", JSOT.Rpc.waveDomain );

  // Open the wave
  JSOT.Rpc.openWavelet( wavelet.url().toString() );

  // Create the conversation document
  var mainDoc = wavelet.getDoc("conversation");
  var conv = new JSOT.Doc.ElementStart( "conversation" );
  mainDoc.appendChild( conv );
  mainDoc.has_gui = true;

  // Create a first root blip
  this.createBlip( mainDoc.firstChild, null, wavelet );
  
  // Show it
  document.getElementById('waveurl').value = wavelet.url().toString(); 
  JSOT.Path.LocalState.setValue( 'waveurl', wavelet.url().toString() );  
}

function createBlip(parent, afterBlip)
{
  wavelet = parent.doc.wavelet;
  
  var blipDoc = wavelet.getDoc("b+" + Math.random().toString() );
  blipDoc.has_gui = true;
  var body = new JSOT.Doc.ElementStart( "body" );
  blipDoc.appendChild( body );
  
  var convBlip = new JSOT.Doc.ElementStart( "blip", { "id" : blipDoc.docId } )
  if ( !afterBlip )
	parent.insertBefore( convBlip, parent.firstChild );
  else
	parent.insertBefore( convBlip, afterBlip.nextSibling );
}

function createThread(parentBlip)
{
  var wavelet = parentBlip.doc.wavelet;

  var blipDoc = wavelet.getDoc("b+" + Math.random().toString() );
  blipDoc.has_gui = true;
  var body = new JSOT.Doc.ElementStart( "body" );
  blipDoc.appendChild( body );
  
  var convThread = new JSOT.Doc.ElementStart( "thread", { "id" : "t+" + Math.random().toString() } )
  var convBlip = new JSOT.Doc.ElementStart( "blip", { "id" : blipDoc.docId } )
  convThread.appendChild( convBlip );
  parentBlip.appendChild( convThread, parent.firstChild );
}

function buildGUI()
{
  // "wave()/doc(conversation)/conversation/blip"
  var rootBlipPath = new JSOT.Path.Axis.Wave();
  var tmp1 = new JSOT.Path.Axis.Doc( "conversation" );
  rootBlipPath.setNextPath( tmp1 );
  var tmp2 = new JSOT.Path.Axis.Child();
  tmp2.addFilter( new JSOT.Path.Filter.NodeName( "conversation" ) );
  tmp1.setNextPath( tmp2 );
  var tmp3 = new JSOT.Path.Axis.Child();
  tmp3.addFilter( new JSOT.Path.Filter.NodeName( "blip" ) );
  tmp2.setNextPath( tmp3 );
  var rootBlipPathTemplate = new JSOT.Path.PathTemplate( rootBlipPath );

  var bodyPath = new JSOT.Path.Axis.Child();
  bodyPath.addFilter( new JSOT.Path.Filter.NodeName( "body" ) );
  var bodyPathTemplate = new JSOT.Path.PathTemplate( bodyPath );
  var bodyEditorTemplate = new JSOT.Template.EditorTemplate();
  var bodyTemplate = new JSOT.Template.ForeachTemplate( bodyPathTemplate, bodyEditorTemplate );
  bodyTemplate.debugName = "bodyTemplate";
  
  var threadTemplate = new JSOT.Template.StaticTemplate( showThread );

  var threadPath = new JSOT.Path.Axis.Child();
  threadPath.addFilter( new JSOT.Path.Filter.NodeName( "thread" ) );
  var threadPathTemplate = new JSOT.Path.PathTemplate( threadPath );
  var threadsTemplate = new JSOT.Template.ForeachTemplate( threadPathTemplate, threadTemplate );
  threadsTemplate.debugName = "threadsTemplate";
  
  var blipTemplate = new JSOT.Template.StaticTemplate( showBlip );
  blipTemplate.addTemplate( "body", bodyTemplate );
  blipTemplate.addTemplate( "threads", threadsTemplate );

  var blipPath = new JSOT.Path.Axis.Child();
  blipPath.addFilter( new JSOT.Path.Filter.NodeName( "blip" ) );
  var blipPathTemplate = new JSOT.Path.PathTemplate( blipPath );
  var threadBlipsTemplate = new JSOT.Template.ForeachTemplate( blipPathTemplate, blipTemplate );
  threadBlipsTemplate.debugName = "threadBlipsTemplate";
  threadTemplate.addTemplate( "blips", threadBlipsTemplate );

  var rootBlipTemplate = new JSOT.Template.ForeachTemplate( rootBlipPathTemplate, blipTemplate );
  rootBlipTemplate.debugName = "rootBlipTemplate";

  var wavePath = new JSOT.Path.Axis.LocalState( "waveurl" );
  var wavePathTemplate = new JSOT.Path.PathTemplate( wavePath );
  var waveTemplate = new JSOT.Template.WithTemplate( wavePathTemplate, rootBlipTemplate );
  
  var root = new JSOT.Template.RootTemplate( waveTemplate );
  var rootInstance = root.createInstance( null, document.getElementById("wavecontent") );
}

function showBlip(templateInstance)
{
  var d = document.createElement("div")
  d.className = "blip";
  var title = document.createElement("div")
  title.appendChild( document.createTextNode("Blip: " + templateInstance.context.getAttribute("id") ) );
  d.appendChild( title );

  var input = document.createElement("input");
  input.type = "button";
  input.value = "Create follow up";
  input.onclick = function() { createBlip( templateInstance.context.parentNode, templateInstance.context ); };
  d.appendChild( input );

  var input2 = document.createElement("input");
  input2.type = "button";
  input2.value = "Create thread";
  input2.onclick = function() { createThread( templateInstance.context ); };
  d.appendChild( input2 );

  var input3 = document.createElement("input");
  input3.type = "button";
  input3.value = "Delete";
  input3.onclick = function() { templateInstance.context.parentNode.removeChild( templateInstance.context ); };
  d.appendChild( input3 );

  templateInstance.instantiateTemplate( "body", d, input, templateInstance.context.doc.wavelet.getDoc( templateInstance.context.getAttribute("id") ) );

  var d2 = document.createElement("div")
  // d2.appendChild( document.createTextNode("Threads") );
  d.appendChild( d2 );

  templateInstance.instantiateTemplate( "threads", d, d2 );
  
  templateInstance.domNodes.push( d );
}

function showThread(templateInstance)
{
  var d = document.createElement("div")
  d.className = "thread";
  var title = document.createElement("div")
  title.appendChild( document.createTextNode("Thread: " + templateInstance.context.getAttribute("id") ) );
  d.appendChild( title );

  templateInstance.instantiateTemplate( "blips", d, null );
  
  templateInstance.domNodes.push( d );
}

function dump()
{
  window.console.log(mainDoc.toString() );
}

  </script>
</body>
</html>